import React, { Component } from 'react'
import {
  // BrowserRouter  HashRouter
  HashRouter as Router, // 引入HashRouter模块，并且重新起名字为 Router
  Switch, // 多个选择一个
  Route, // 路由定义的组件
  Redirect, // 重定向组件
  NavLink // 声明式跳转组件，可以拥有选中的样式
} from 'react-router-dom'
const Home = () => (<div>首页</div>)
const Kind = () => (<div>分类</div>)
const Cart = () => (<div>购物车</div>)
const User = () => (<div>个人中心</div>)
const NotFound = () => (<div>404</div>)

export default class App extends Component {
  render() {
    // 项目中Router一般放在最顶级
    // 一般Router组件只能有一个嵌套元素（以前）,而一个项目有很多个路由，怎么定义路由就是关键
    // Router组件包裹 Switch 组件，Switch 组件包裹 Route 组件
    return (
      <Router>
        <Switch>
          {/* 相当于vue中的路由的配置以及 <router-view></router-view> */}
          <Route path="/home" component = { Home } />
          <Route path="/kind" component = { Kind } />
          <Route path="/cart" component = { Cart } />
          <Route path="/user" component = { User } />
          <Redirect path="/" exact = { true } to="/home" />
          <Route path="*" component = { NotFound } />
        </Switch>

        {/* 点击切换 */}
        {/* Link: 不带有选中的样式 */}
        {/* NavLink: 带有选中的样式 */}
        {/* 选中时会自动带有 class="active" 的样式，设置一下即可 */}
        {/* 默认渲染为a标签，没有tag属性 */}
        {/* 也可以设置 activeStyle 以及 activeClassName */}
        <NavLink to="/home" activeStyle = { { color: '#f66' } }>首页</NavLink>
        <NavLink to="/kind" activeStyle = { { color: '#f66' } }>分类</NavLink>
        <NavLink to="/cart" activeStyle = { { color: '#f66' } }>购物车</NavLink>
        <NavLink to="/user" activeStyle = { { color: '#f66' } }>我的</NavLink>
      </Router>
    )
  }
}
